정보처리기사 공부 후 정리 자료입니다. 정확하지 않을 수 있으니 꼭 책을 참고해서 공부하세요

2020 정보 처리 기사 화면 설계 요약 입니다. 정처기 공부를 할 때 활용하세요.

1. 사용자 인터페이스(UI; User Interface)

• (CGN)
• 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어
• CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
• GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
• NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

2. 사용자 인터페이스의 기본 원칙

• (직유학유)
• 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함
• 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함
• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함
• 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함

3. 사용자 인터페이스의 설계 지침

• (사일단결 가포접명오)
• 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야 함
• 일관성 : 버튼이나 조작 방법 등을 일관성 있게 제공하므로 사용자가 쉽게 기억하고 습득할 수 있게 설계해야 함
• 단순성 : 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 함
• 결과 예측 가능 : 작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계해야 함
• 가시성 : 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계해야 함
• 표준화 : 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 쉽게 사용할 수 있도록 설계해야 함
• 접근성 : 사용자의 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 설계해야 함
• 명확성 : 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 함
• 오류 발생 해결 : 오류가 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 함

4. UI 설계 도구

• (와스프목유)

• 와이어프레임(Wireframe)

  • 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계
  • 와이어프레임을 제작할 때는 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계

• 스토리보드(Story Board)

  • 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
  • 스토리보드의 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI 화면, 우측에는 디스크립션을 기입

• 프로토타입(Prototype)

  • 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형, 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플
  • 페이퍼 프로토타입 : 아날로그적인 방법으로, 스케치, 그림, 글 등을 이용하여 손으로 직접 작성
  • 디지털 프로토타입 : 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성

• 목업(Mockup)

  • 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
  • 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않음

• 유스케이스(Use Case)

  • 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
  • 사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화

5. UI 스타일 가이드 작성

• UI 스타일 가이드는 개발자나 디자이너들이 UI를 작성할 때 기준이 되는 규칙들
• 구동 환경 정의 : 컴퓨터 OS, 웹 브라우저, 모니터 해상도, 프레임 세트 등을 사용 환경에 적합하도록 규정하는 단계

• 레이아웃 정의

  • 화면 구조를 정의하고 각 영역의 메뉴를 구성하는 단계
  • 상단 메뉴 : 필수 영역으로 시스템 전체 페이지에 동일하게 적용
  • 좌측 메뉴 : 선택 영역으로 시스템별 서브 페이지에 선택적으로 적용
  • 내용 구성 : 필수 영역으로 시스템의 전체 콘셉트를 나타내는 메인 이미지와 시스템별로 필요한 콘텐츠를 표시
  • 하단 메뉴 : 선택 영역으로 회사 상황에 따라 표시 여부를 결정할 수 있음

• 네비게이션 정의

  • 네비게이션의 메뉴 타입을 선택하여 적용하는 단계
  • 사용자가 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것으로 메뉴, 버튼, 링크 등으로 구성
• 기능 정의 : 시스템에 적용할 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화하는 단계
• 구성 요소 정의 : 화면에 표시할 그리드나 버튼 등을 정의하는 단계

6. UI 요구사항 확인

• 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계

• UI 요구사항 확인 순서

  • 목표 정의 : 사용자들을 대상으로 인터뷰를 진행한 후 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의. 인터뷰는 개별적으로 진행 , 한 시간을 넘지 않도록 함, 사용자 리서치를 시작하기 전에 함
  • 활동 사항 정의 : 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의
• UI 요구사항 작성 : 여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성 ( 실사용자 중심 )

• UI 요구사항 작성 순서 :

  • 요구사항 요소 확인 : 파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토
  • 요구사항 요소 : 데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항
  • 정황 시나리오 작성 : 정황 시나리오는 사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사
  • 요구사항 작성 : 정황 시나리오를 토대로 작성

7. UI 흐름 설계

• 업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계
• 기능 작성 : 화면에 표현할 기능을 작성하는 단계
• 입력 요소 확인 : 화면에 표현되어야 할 기능을 확인한 후 화면에 입력할 요소를 확인하는 단계

• 유스케이스 설계

  • UI 요구사항을 기반으로 UI 유스케이스를 설계하는 단계
  • 유스케이스는 화면에 표현할 입력 요소들의 형태나 입력 방법, 배치 등을 고려해서 설계

• 기능 및 양식 확인 : 분석한 기능을 토대로 텍스트 박스, 콤보 박스, 라디오 박스, 체크 박스 등을 확인하고 규칙을 정의

  • 텍스트 박스 : 입력이 가능함을 표시
  • 콤보 박스 : 목록에서 항목을 선택하거나 입력할 수 있음
  • 라디오 박스 : 여러 개의 값 중 하나만을 선택할 수 있음
  • 체크 박스 : 여러 개의 값 중 하나 이상을 선택할 수 있음

8. UI 상세 설계

• 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계
• 요구사항 확인 : UI 상세 설계를 위한 요구사항을 최종적으로 확인하는 단계

• UI 설계서 표지 및 개정 이력 작성

  • UI 설계서 표지 : 다른 문서와 혼동되지 않도록 프로젝트명이나 시스템명을 포함시켜 작성
  • UI 설계서 개정 이력 : UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리해 놓은 문서
  • 처음 작성 시 첫 번째 항목을 ‘초안 작성’, 버전(Version)을 1.0으로 설정하고, UI 설계서에 변경 사항이 있을 때마다 변경 내용을 적고 버전을 0.1씩 높임
• UI 구조 설계 : UI 요구사항과 UI 프로토타입에 기초하여 UI 구조를 설계하는 단계
• 메뉴 구조 설계 : 사이트 맵 구조를 통해 사용자 기반 메뉴 구조를 설계 하는 단계
• 화면 설계 : UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계하는 단계